<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport"
		content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no, viewport-fit=cover" />
    <title>视频</title>
    <link rel="stylesheet" href="css/vant.css">
    <link rel="stylesheet" href="css/shareVideo.css">
    <link rel="stylesheet" href="css/conmask.css">
</head>

<body>
    <div id="app" v-cloak>

        <div class="imgBox" @click="palyhandle">
            <video v-if="!systemIos" class="video" ref="video" :src="fileUrl" width="100%" height="100%"
                webkit-playsinline="true" x5-video-player-type="h5" x5-video-player-fullscreen="true"
                x5-video-player-type="h5" :poster="path+'video/'+video.hv_cover" x-webkit-airplay="allow"
                playsinline="true" type="video/mp4" muted='true'>
                <source :src="fileUrl" type="video/mp4" />
            </video>
            <video v-else class="video" ref="video" controls :src="fileUrl" width="100%" height="100%" type="video/mp4"
                object-fit='fill' autobuffer preload="none" :poster="path+'video/'+video.hv_cover" webkit-playsinline
                playsinline="true">
            </video>
            <img src="./img/videoImg/downImg.png" class="downImg" alt="">
            <div class="talk" @click="show=true">
                <img src="./img/videoImg/talk.png" alt="">
                <div>{{num}}</div>
            </div>
        </div>
        <img src="./img/meetIngImg/video-bg.png" class="playBtn" @click="palyhandle" alt="" v-if="!playFlag">


        <!-- 评论弹窗开始 -->
        <van-popup v-model="show" round position="bottom" :style="{ height: '440px' }">
            <div class="poopup">
                <div class="popup-title">{{num}}条评论</div>
                <div class="popup-close" @click="show=false">
                    <van-icon name="cross" />
                </div>
                <div class="cont-talk" v-if="num">
                    <div class="talk-item" v-for="(item,index) in comments">
                        <!-- 评论者信息 -->
                        <div class="talk-info">
                            <img class="talk-img" :src="item.city_name" alt="" @error="loadimg">
                            <span class="talk-name">{{item.user_name}}</span>&nbsp;
                            <span class="talk-time">{{item.date_time.split(" ")[0]}}</span>
                        </div>
                        <!-- 评论内容 -->
                        <div>{{item.comment_content}}</div>
                        <!-- 评论点赞 -->
                        <div class="talk-good" :class="item.hand_status?'red':'ccc'">
                            <div :class="item.hand_status?'doing':''">
                                <van-icon name="like" size="22" />
                            </div>
                            <div>{{item.likes_num}}</div>
                        </div>
                    </div>
                    <div class="none-have">暂无更多了</div>
                </div>
                <div class="none-talk" v-else>暂时没有评论</div>
            </div>
        </van-popup>


        <!-- 按钮 -->
        <div class="btn" @click="downHandle">
            下载APP查看
        </div>
        <div class="topicBtn1" @click="toShare">
            分享
        </div>
        <div class="downBox" v-if="showPop" @click="showPop=false">
            <img src="./img/downTip.png" alt="">
        </div>
        <div class="downBox" v-if="sharePop" @click="sharePop=false">
            <img class="shareImg" src="./img/shareImg.png" alt="">
        </div>
        <div class="mask" v-if="mask">
            <img src="img/load.gif">
        </div>
    </div>


    <script src="js/vue.min.js"></script>
    <script src="js/flex_ible/lib-flexible.js"></script>
    <script src="js/vue-lazyload.js"></script>
    <script src="js/vant.min.js"></script>
    <script src="js/vue-lazyload.js"></script>
    <script src="js/url.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/ajax.js"></script>
    <script type="text/javascript" src="https://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
    <script>
        var ua = navigator.userAgent.toLowerCase();
        var isWeixin = ua.indexOf('micromessenger') != -1;
        // if (!isWeixin) {
        //     window.location.href = 'https://zbz-downlink.oss-cn-zhangjiakou.aliyuncs.com/com.ccclkj.clinic.wgt'
        // }
        // console.log(ua);
        // console.log(isWeixin);
        Vue.use(VueLazyload);
        var vm = new Vue({
            el: "#app",
            data: {
                mask: false,
                // videoId: 184,
                // user_id: 1,
                videoId: sessionStorage.getItem('videoId'),
                user_id: sessionStorage.getItem('userId'),
                video: {},
                comments: [],
                showPop: false,
                sharePop: false,
                fileUrl: '',
                systemIos: false,
                num: 0,
                show: false,
                playFlag: false
            },
            created() {
                if (!this.videoId) {
                    window.location.replace("./newDown.html")
                }
                this.getData()
                this.getComment()
            },
            mounted() {
            },
            methods: {
                palyhandle() {
                    this.playFlag = !this.playFlag
                    console.log(this.playFlag);
                    if (this.playFlag) {
                        this.$refs.video.play()
                    } else {
                        this.$refs.video.pause()
                    }
                },
                downHandle: function () {
                    window.location.replace("newDown.html")
                    return;

                    if (isWeixin) {
                        this.showPop = true

                    } else {
                        if (window.navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)) {
                            console.log("000");
                            var loadDateTime = new Date();
                            window.location = "clinic://"; //schema链接或者universal link
                            window.setTimeout(
                                function () { //如果没有安装app,便会执行setTimeout跳转下载页
                                    var timeOutDateTime = new Date();
                                    if (timeOutDateTime - loadDateTime < 5000) {
                                        window.location =
                                            "https://itunes.apple.com/cn/app/%E5%80%BC%E6%97%A5%E7%94%9F/id1448441059?mt=8"; //ios下载地址  
                                    } else {
                                        window.close();
                                    }
                                }, 500);

                        } else if (window.navigator.userAgent.match(/android/i)) {
                            var state = null;
                            try {

                                window.location = 'clinic://'; //schema链接或者universal link
                                window.setTimeout(
                                    function () {
                                        window.location =
                                            "https://a.app.qq.com/o/simple.jsp?pkgname=com.ccclkj.clinic";
                                        //window.location = "http://www.ccclkj.cn:1125/zbz.apk"; 
                                        //android下载地址  
                                    }, 500);
                            } catch (e) { }
                        }

                    }
                },
                loadimg(e) {
                    var img = e.srcElement;
                    img.src = 'img/about.png'
                },
                getData: function () {
                    var that = this;
                    console.log(sessionStorage.getItem('user_id'))
                    ajax({
                        type: "post",
                        url: newUrl + "video/getVideoOne",
                        data: {
                            hvId: that.videoId
                        },
                        dataType: 'json',
                        timeout: 10000,
                        contentType: "application/json",
                        success: function (res) {
                            var res = JSON.parse(res)
                            if (res.flag) {
                                var data = res.data
                                console.log(data);
                                that.video = data
                                that.fileUrl = path + 'video/' + data.hv_video
                            }
                        },
                    })
                },
                getComment: function () {
                    var that = this;
                    ajax({
                        type: "post",
                        url: newUrl + "video/getVideoComment",
                        data: {
                            hvId: that.videoId
                        },
                        dataType: 'json',
                        timeout: 10000,
                        contentType: "application/json",
                        success: function (res) {
                            var res = JSON.parse(res)
                            if (res.flag) {
                                var data = res.data
                                console.log(data);
                                that.comments = data
                                that.num = data.length
                            }
                        },
                    })
                },
                toShare: function () {
                    var _this = this;
                    _this.mask = true
                    var title = _this.video.hv_name;
                    var dec = "这里有好视频，分享给你咯";
                    var url = location.href.split('#')[0];
                    ajax({
                        type: "post",
                        url: newUrl + "share/share",
                        data: {
                            url: url
                        },
                        dataType: 'json',
                        timeout: 10000,
                        contentType: "application/json",
                        success: function (data) {
                            var res = JSON.parse(data)
                            console.log(res)
                            _this.mask = false
                            var datas = res.data
                            wx.config({
                                debug: false,
                                appId: datas.appId,
                                timestamp: datas.timestamp,
                                nonceStr: datas.nonceStr,
                                signature: datas.sign,
                                jsApiList: [
                                    'checkJsApi',
                                    'updateAppMessageShareData',
                                    'updateTimelineShareData',
                                    'onMenuShareTimeline',
                                    'onMenuShareAppMessage'
                                ]
                            });
                            wx.ready(function () { //需在用户可能点击分享按钮前就先调用
                                _this.sharePop = true;
                                var img = path + 'video/' + _this.video.hv_cover;
                                var link_rrl =
                                    "https://www.ccclkj.cn/sharepage/index.html?user_id=" +
                                    _this.user_id + "&id=" + _this.videoId + "&flag=13&shopId=" + sessionStorage.shopId
                                wx.updateAppMessageShareData({
                                    title: title, // 分享标题
                                    desc: dec, // 分享描述
                                    link: link_rrl, // 分享链接
                                    imgUrl: img, // 分享图标
                                    type: 'video', // 分享类型,music、video或link，不填默认为link
                                    success: function () {
                                        //$("body").remove(".thisMask");
                                        return false;
                                    }
                                })
                                wx.updateTimelineShareData({
                                    title: title, // 分享标题
                                    link: link_rrl, // 分享链接
                                    imgUrl: img, // 分享图标
                                    success: function () {
                                        //$("body").remove(".thisMask");
                                        return false;
                                    }
                                })
                            });
                        }
                    })
                },
            }
        })
    </script>

</body>

</html>